<template>
  <div class="detail" v-if="detailData">
    <div class="detail-item">
      <div class="label">{{  $t("table.profile_apply.col_3") }}</div>
      <div class="content">{{ detailData.course_title }}</div>
    </div>
    <div class="detail-item">
      <div class="label">{{ $t("table.profile_apply.col_5") }}</div>
      <div class="content">
        {{ detailData.last_name +' '+ detailData.first_name }}
      </div>
    </div>
    <div class="detail-item">
      <div class="label">{{ $t("table.profile_apply.col_2") }}</div>
      <div class="content">{{ detailData.order_number }}</div>
    </div>
    <div class="detail-item">
      <div class="label">{{ $t("table.profile_apply.col_4") }}</div>
      <div class="content">{{ detailData.create_time }}</div>
    </div>
    <div class="detail-item">
      <div class="label">{{ $t("table.profile_apply.col_6") }}</div>
      <div class="content">
        <span class="pre-pay" v-if="detailData.status_title == '待支付'">{{
          detailData.status_title
        }}</span>
      </div>
    </div>
    <div
      class="detail-item"
      v-if="
        detailData.CourseSubmitList && detailData.CourseSubmitList.length > 0
      "
    >
      <div class="label">{{ $t("label.course_outline") }}</div>
      <div class="content table">
        <div style="border: 1px solid #e6edf2; border-bottom: none;text-align:left">
          <template
            v-for="(item, index) in detailData.CourseSubmitList"
            :key="item.list_id"
          >
            <div
              class="table-header cell"
              :style="{
                background: index % 2 == 0 ? '#f5f9fa' : '#fff',
              }"
            >
              {{ item.list_title }}
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { onBeforeMount, ref } from "vue";
import { postCourseSubmitView } from "../../api/aviation";

const route = useRoute();

const detailData = ref();
const getDetailData = async () => {
  let id = route.query.id * 1;
  let res = await postCourseSubmitView(id);
  if (res.code == 200) {
    detailData.value = res.data;
  }
};

onBeforeMount(() => {
  getDetailData();
});
</script>
<style scoped lang="less">
@import url("./common.less");
</style>
